<template>
  <div id="shop-header">
    <!--顶部搜索栏-->
    <div id="shop-top" :style="{top:(this.getSafeArea().top-4)+'px'}">
      <div class="left back-button" :style="{top:(this.getSafeArea().top-4)+'px'}" style="width: 40px; height: 40px;" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <div class="right" style="flex: 1">
        <div id="search-box">
          <div id="search-input-outer">
            <!--        <i class="search-bar-logo"></i>-->
            <i class="icon iconfont icon-sousuo"  @click="goToSeach"></i>
            <input type="text" readonly="true" v-model="searchKeywords" class="search-bar-input" placeholder="搜索你想要的商品..."  @click="goToSeach" >
            <get-product-name-by-image :shop-id="shop.id"/>
            <div class="c"></div>
          </div>
          <div id="cart-button" @click="goToCart()">
            <i class="iconfont icon-gouwuchekong"></i>
          </div>
          <div class="c"></div>
        </div>
      </div>
    </div>

    <shop-info-item :shop="shop" :show-score="true"/>

  </div>
</template>

<script>
import ShopInfoItem from './ShopInfoItem'
import GetProductNameByImage from './GetProductNameByImage'
export default {
  name: 'ShopHeader',
  components: {GetProductNameByImage, ShopInfoItem},
  props:{
    shop:Object
  },
  data:function () {
    return {
      searchKeywords:''
    }
  },
  mounted () {
    this.searchKeywords=this.$route.query.searchKeywords
  },
  methods:{
    goToSeach:function () {
      if (!this.searchKeywords){
        this.$router.push('/SearchAct?fromType=Shop&shopId='+this.$props.shop.id)
      }else{
        this.$router.push('/SearchAct?fromType=Shop&shopId='+this.$props.shop.id+'&searchKeywords='+this.searchKeywords)
      }
    },
    goToCart:function () {
      var formUrl='/ShopHome?id='+this.$props.shop.id
      this.$router.push('/Cart?fromUrl='+encodeURI(formUrl))
    }
  }
}
</script>

<style scoped>

</style>
